<template>
  <div>
    <search :auto-fixed=false></search>
    <grid :show-vertical-dividers="false">
      <grid-item v-for="i in 3" :key="i">
        <span class="grid-center">{{i}}</span>
      </grid-item>
    </grid>
    <grid :show-vertical-dividers="false">
      <grid-item>a</grid-item>
      <grid-item> a 2</grid-item>
      <grid-item> a 3</grid-item>
    </grid>
    <divider>at</divider>
    <scroller lock-y scrollbar-x>
      <div class="box1">
        <div class="box1-item" v-for="i in 7"><span>{{' ' + i + ' '}}</span></div>
      </div>
    </scroller>

    <!--<group>-->
    <!--<x-input title="店号：" v-model="operation.store_no"></x-input>-->
    <!--</group>-->
    {{operateType}}

    <!--<group title="选项"> -->
    <!--<cell title="中心" is-link @click.native="showModuleAuto"></cell> -->
    <!--</group>-->
  </div>
</template>

<script>
  import {Search, Grid, GridItem, AlertModule, Divider, Scroller} from 'vux'

  export default {
    name: "OperationContent",
    components: {Search, Grid, GridItem, Divider, Scroller},
    props: {
      operateType: String
    },
    methods: {
      showModule() {
        AlertModule.show({
          title: '中心提示',
          content: '确定选择中心？',
        })
      },
      showModuleAuto() {
        this.showModule()
        setTimeout(() => {
          AlertModule.hide()
        }, 1500)
      },
    },
    data() {
      return {operation: {store_no: '1'}}
    }
  }
</script>

<style scoped>
  div {
    width: 100%;
    height: 100%;
  }

  .box1 {
    height: 100px;
    position: relative;
    width: 1490px;
  }

  .box1-item {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    display: inline-block;
    margin-left: 15px;
    float: left;
    text-align: center;
    line-height: 100px;
  }

  .box1-item:first-child {
    margin-left: 0;
  }
</style>
